<template>
    <div class="wrap" @touchmove.stop.prevent>
      <b @click="cancle"></b>
      <ul>
        <li @click="selectId(item.Id)" v-for="(item , index) in cancleList">
          <i :class="item.Id===cancleId?'active':''"></i><p>{{item.title}}</p>
        </li>
      </ul>
      <div>
        <p @click="confirm">确定</p>
      </div>
    </div>
</template>

<script>
    export default {
        name: "cancle-cause",
      props:['cancleList'],
        data(){
          return{
             cancleId:null
          }
        },
      created(){

      },
      methods:{
        cancle(){
          this.$emit('cancle')
        },
        selectId(id){
          this.cancleId=id
        },
        confirm(){
          if(this.cancleId){
            this.$emit('confirm',this.cancleId)
          }
        }
      }

    }
</script>

<style scoped lang="scss">
     .wrap{
       position: fixed;
       width: 100%;
       bottom: 0;
       background: #fff;
       padding-top: 10px;
       border-top: 1px solid #ddd;
       z-index: 5;
       >ul{
         margin-bottom: 20px;
         >li{
           height: 26px;
           line-height: 26px;
           padding-left: 20px;
           >i{
             float: left;
              width: 20px;
             height: 20px;
             border: 1px solid #ddd;
             border-radius: 50%;
             margin-top:3px;
             margin-right: 15px;
           }
           .active{
             border: none;
             background-image: url('../assets/img/activeRed.png');
             background-size: 100% 100%;
           }
           >p{
             float: left;
             color: #999;
           }
         }
       }
       >div{
         padding-top: 10px;
         padding-bottom: 30px;
         >p{
           height: 35px;
           line-height: 35px;
           width: 300px;
           background:#2096d4;
           margin: 0 auto;
           border-radius: 5px;
           color: #fff;
           letter-spacing: 7px;
         }
       }
       >b{
         position: absolute;
         top: 5px;
         right: 9px;
         width: 20px;
         height: 20px;
         background-image: url('../assets/img/x.png');
         background-size: 100% 100%;
       }
     }
</style>
